<template>
  <div class="user">

    <app-head title="个人中心"
              :noneBack="true"
              :nonePos="true"
              :noneBg="true"></app-head>

    <div class="card" :style="`background-image: url(${bg})`" v-if="loginFlag">
      <router-link to="/user/setting" class="card-avatar">
        <img class="icon" :src="userinfo.avatar" alt="">
        <!-- <img class="sex" src="@/assets/img/icon_girl.png" alt=""> -->
      </router-link>
      <div class="card-info">
        <h1 class="name">{{userinfo.nickname}}</h1>
        <p class="id">账号：{{userinfo.username}}</p>
      </div>
       <!--<router-link to="/user/news" class="card-news">
         <img class="icon" src="@/assets/img/icon_message.png" alt="">
         <i class="num">1</i>
       </router-link> -->
    </div>

    <div v-else @click="login()" class="card" :style="`background-image: url(${bg})`">
      <router-link to="" class="card-avatar">
        <img class="icon" src="../../assets/img/img-user.png" alt="">
      </router-link>
      <div class="card-info">
        <p class="id" style="font-size: 18px;font-weight: bold">请先登录</p>
      </div>
    </div>

    <!-- <div class="account">
        <h1 class="account-title">我的平台币余额(元)</h1>
        <div class="account-amount">
            <h2>{{userinfo.ptb_cnt}}</h2>
            <router-link to="/user/log">账户明细</router-link>
        </div>
    </div> -->

    <div class="menus">
      <!-- <div @click="installApp" class="menus-cell">
          <img class="icon" src="@/assets/img/icon_jiaoyi.png" alt="">
          <span class="title">小号交易</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
      </div> -->

      <div v-if="loginFlag">
        <router-link to="/user/log" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_account.png" alt="">
          <span class="title">账户明细</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>
      <div v-else @click="login()">
        <router-link to="" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_account.png" alt="">
          <span class="title">账户明细</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>

      <div v-if="loginFlag">
        <router-link to="/user/gift" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_hezi.png" alt="">
          <span class="title">我的礼包</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>
      <div v-else @click="login()">
        <router-link to="" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_hezi.png" alt="">
          <span class="title">我的礼包</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>

      <div v-if="loginFlag">
        <router-link to="/user/contact" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_kefu.png" alt="">
          <span class="title">客服中心</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>
      <div v-else @click="login()">
        <router-link to="" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_kefu.png" alt="">
          <span class="title">客服中心</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>

      <div v-if="loginFlag">
        <router-link to="/user/setting" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_wodetuandui.png" alt="">
          <span class="title">账号中心</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>
      <div v-else @click="login()">
        <router-link to="" class="menus-cell">
          <img class="icon" src="@/assets/img/mine_icon_wodetuandui.png" alt="">
          <span class="title">账号中心</span>
          <img class="right" src="@/assets/img/mine_icon_youjiantou.png" alt="">
        </router-link>
      </div>


    </div>

    <TabBar/>
  </div>
</template>

<script>
  // @ is an alias to /src
  import {mapGetters} from 'vuex'
  import TabBar from '@/components/tab/Bar'

  export default {
    name: 'user',
    components: {
      TabBar
    },
    computed: {
      ...mapGetters([
        'playIndex',
        'userinfo'
      ])
    },
    data() {
      return {
        bg: require('@/assets/img/user_bg.png'),
        loginFlag: null
      }
    },
    methods: {
      installApp() {
        let _self = this
        this.$confirm({
          desc: `此操作需要打开${this.playIndex.app_down.app_basic_down_name}<br>是否立即安装？`,
          btnText: {
            cancel: '取消',
            confirm: '立即安装'
          },
          success: function () {
            _self.$store.state.confirm.visible = false
            window.location.href = _self.playIndex.app_down.app_down_url
          },
          cancel: function () {
            _self.$store.state.confirm.visible = false
          }
        })
      },
      login() {
        HuoSdk.login()
      }
    },
    created() {
      if(!!this.$route.query.reload){
        this.$router.push({
          path: '/user',
        })
        this.loginFlag = false
      }else{
        if (window.localStorage.getItem('loginFlag') == 1) {
          this.loginFlag = false
        } else {
          this.loginFlag = true
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .user {
    min-height: 100vh;
    background-color: #F8F8F8;
  }

  .card {
    height: 1.8rem;
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: -0.5rem;
    padding: 0.3rem 0.2rem 0;
    background-size: cover;

    &-avatar {
      position: relative;
      margin-right: 0.2rem;

      .icon {
        width: 0.58rem;
        height: 0.58rem;
        border: 0.02rem solid #ffffff;
        border-radius: 50%;
      }

      .sex {
        width: 0.19rem;
        height: 0.19rem;
        position: absolute;
        right: -0.03rem;
        top: 0.44rem;
      }
    }

    &-info {
      color: #ffffff;
      font-size: 0.13rem;

      .name {
        line-height: 0.25rem;
        font-size: 0.18rem;
      }

      .id {
        margin-top: 0.04rem;
        line-height: 0.18rem;
      }
    }

    &-news {
      margin-left: auto;
      position: relative;
      color: #ffffff;

      .icon {
        width: 0.27rem;
      }

      .num {
        position: absolute;
        right: -0.06rem;
        top: -0.06rem;
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background-color: #E80E29;
        font-size: 0.08rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .account {
    margin: -0.4rem 0.15rem 0;
    padding: 0 0.1rem;
    height: 0.87rem;
    background-color: #ffffff;
    box-shadow: 0px 0.05rem 0.2rem 0px rgba(0, 0, 0, 0.1);
    border-radius: 0.05rem;

    &-title {
      font-weight: 600;
      color: #999999;
      font-size: 0.1rem;
      line-height: 0.44rem;
    }

    &-amount {
      line-height: 1;
      display: flex;
      align-items: center;
      font-size: 0.12rem;
      justify-content: space-between;

      h2 {
        font-weight: 700;
        font-family: DINAlternate-Bold;
        font-weight: bold;
        font-size: 0.36rem;
      }

      a {
        display: block;
        text-align: center;
        width: 0.78rem;
        line-height: 0.3rem;
        background: rgba(216, 216, 216, 1);
        border-radius: 100px;
        color: #ffffff;
      }
    }
  }

  .menus {
    margin-top: 0.1rem;

    &-cell {
      background-color: #ffffff;
      display: flex;
      align-items: center;
      line-height: 0.54rem;
      padding-left: 0.17rem;
      padding-right: 0.14rem;
      color: #333333;
      font-size: 0.15rem;
      margin-bottom: 0.01rem;
    }

    .icon {
      margin-right: 0.14rem;
      width: 0.2rem;
      height: 0.2rem;
    }

    .title {
      font-weight: 600;
    }

    .right {
      margin-left: auto;
      height: 0.15rem;
    }
  }
</style>
